<template>
  <div class="app-container preWorkBox">
    <el-table v-loading="loading" :data="imgList" width="550px">
      <el-table-column type="index" label="序号" align="center" width="50" />
      <!-- <el-table-column label="文件名" align="center" prop="inspectionCode"  /> -->
      <el-table-column label="文件名" align="center" prop="inspectionCode">
        <template slot-scope="scope">
          <div v-for="item in scope.row.productTechFile" :key="item">
            <div v-if="item">
              <el-button
                size="mini"
                type="text"
                style="font-size: 14px;"
                @click="handelView(item)"
              >{{ getFileName(item) }}</el-button>
              <!-- <i class="el-icon-download" style="font-size: 20px;margin-left:5px; color:#1890ff"><a :href="item"></a></i> -->
              <a :href="item"><i class="el-icon-download" style="font-size: 20px;margin-left:5px; color:#1890ff"></i></a>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="时间" align="center" prop="createTime" width="200px" />
    </el-table>
    <!-- <img v-for="(item) in imgList" :key="item.url" :src="item.url" alt /> -->
    <!-- <div class="imageDiv">
        <el-image
          style="max-width: 800px;"
          v-for="(item) in imgList"
          :key="item.url"
          :src="item.url"
          :preview-src-list="[item.url]"
        ></el-image>
    </div>-->
    <!-- <div>
      <el-carousel height="800px" style="width: 900px;" :loop="false">
        <el-carousel-item v-for="item in imgList" :key="item.url">
          <div>
            <el-image :src="item.url" style="max-width: 900px;" />
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>-->

    <!-- <vue-office-excel
      v-for="item in imgList"
      :src="item.productTechFil"
      :key="item.productTechFile"
      style="height: 100vh;"
      @rendered="renderedHandler"
      @error="errorHandler"
    />-->
    <!-- <vue-office-excel
      :src="excels"
      style="height: 100vh;width:100%"
      @rendered="renderedHandler"
      @error="errorHandler"
    />-->
    <!-- <vue-office-docx
        :src="docx"
        style="height: 100vh;"
        @rendered="renderedHandler"
        @error="errorHandler"
    />-->
    <!-- <el-drawer title="我是标题" :visible.sync="drawer" size="80%">
      <vue-office-excel
        v-if="fileType=='xslx'"
        :src="url"
        style="height: 100vh;width:100%"
        @rendered="renderedHandler"
        @error="errorHandler"
      />
      <vue-office-docx
        v-if="fileType=='docx'"
        :src="url"
        style="height: 100vh;"
        @rendered="renderedHandler"
        @error="errorHandler"
      />
    </el-drawer>-->
    <FileView v-if="drawer" ref="fileViews"></FileView>
  </div>
</template>
    
<script>
//引入VueOfficeExcel组件
import VueOfficeExcel from "@vue-office/excel";
//引入相关样式
import "@vue-office/excel/lib/index.css";
//引入VueOfficeDocx组件
import VueOfficeDocx from "@vue-office/docx";
//引入相关样式
import "@vue-office/docx/lib/index.css";
// proSop
import { proSop } from "@/api/apppro/index";
import FileView from "./fileView.vue";

export default {
  name: "sopShow",
  data() {
    return {
      imgList: [],
      drawer: false,
      excels:
        "http://68ffd19d.r11.cpolar.top/mes/file/download/2024-02/HKZN-WI-03-334-国网六统一60kw单枪装配作业指导书_1709019124923.xlsx",
      url: "",
      loading: false,
      fileType: null
    };
  },
  components: {
    VueOfficeExcel,
    VueOfficeDocx,
    FileView
  },
  props: {
    formObj: Object
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      console.log(this.formObj, "=========this.formObj==================");
      let query = {
        productCode: this.formObj.productCode,
        // productName: this.formObj.productName,
        // productSpec: this.formObj.productSpc,
        bomVersionCode: this.formObj.bomItemCode
      };
      this.loading = true;
      proSop(query).then(res => {
        console.log(res, "==========res11111111===========");
        let list = [];
        res.data.map((item, index) => {
          list.push(
            Object.assign({}, item, {
              productTechFile: item.productTechFile.split(",")
            })
          );
        });
        this.imgList = list || [];
        console.log(this.imgList, "===============ingliost==========");
        this.loading = false;
        console.log(this.imgList, "==========this.imgList===========");
      });
    },
    renderedHandler() {
      console.log("渲染完成");
    },
    errorHandler(e, data) {
      console.log(e, data, "渲染失败");
    },
    // 获取文件名称
    getFileName(name) {
      if (name.lastIndexOf("/") > -1) {
        return name.slice(name.lastIndexOf("/") + 1);
      } else {
        return "";
      }
    },
    handelView(url) {
      const fileName = url.split(".");
      this.fileType = fileName[fileName.length - 1];
      if (this.fileType == "xlsx" || this.fileType == "docx" || this.fileType == "png"|| this.fileType == "jpg"|| this.fileType == "jpeg") {
        this.drawer = true;
        console.log(this.fileType,"111111");
        this.$nextTick(() => {
          this.$refs.fileViews.init(url);
        });
      }else{
        this.$message({
          message: "仅支持 .xlsx 、 .docx、.png 、.jpg、.jpeg 的文件预览 ！！！！！",
          type: "warning"
        });
        return;
      }
    },
 
  }
};
</script>
    
<style rel="stylesheet/scss" lang="scss" scoped>
.preWorkBox {
  text-align: left;
  display: flex;
  justify-content: flex-start;
  width: 70%;
}
.preWorkBox ::v-deep .el-icon-check::before {
  // display: none !important;
  content: "";
}
</style>
    